<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>

        <script>
            window.onload = function () {
                /* 
                    全选功能
                    取消
                    反选
                    提交
                    小checkbox和大checkbox同步
                */

                /* 
                    全选功能
                        - 点击按钮后，使四个多选框都变成选中状态
                */

                // 获取四个多选框
                const hobbies = document.getElementsByName("hobby")

                // 获取全选按钮
                const allBtn = document.getElementById("all")

                // 为按钮绑定单级响应函数
                allBtn.onclick = function () {
                    // 将多选框设置为选中状态
                    for(let i=0; i<hobbies.length; i++){
                        hobbies[i].checked = true
                    }

                }
            }
        </script>
    </head>
    <body>
        <div>
            <form action="#">
                <div>
                    请选择你的爱好：
                    <input type="checkbox" id="check-all" /> 全选
                </div>
                <div>
                    <input type="checkbox" name="hobby" value="乒乓球" /> 乒乓球
                    <input type="checkbox" name="hobby" value="篮球" /> 篮球
                    <input type="checkbox" name="hobby" value="羽毛球" /> 羽毛球
                    <input type="checkbox" name="hobby" value="足球" /> 足球
                </div>
                <div>
                    <button type="button" id="all">全选</button>
                    <button type="button" id="no">取消</button>
                    <button type="button" id="reverse">反选</button>
                    <button type="button" id="send">提交</button>
                </div>
            </form>
        </div>
    </body>
</html>
